<template>
  <div id="app">
    <!-- 主应用 - 直接显示，无需等待加载 -->
    <transition
      name="app-fade"
      @enter="onAppEnter"
      @after-enter="onAppAfterEnter"
      appear
    >
      <BasicLayout />
    </transition>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import BasicLayout from '@/layouts/BasicLayout.vue'
import { useLoginUserStore } from '@/stores/useLoginUserStore'
import { gsap } from 'gsap'

const loginUserStore = useLoginUserStore()

// 简化的初始加载状态
const isInitialLoading = ref(false) // 直接设为false，不显示加载动画
const loadingProgress = ref(100)
const loadingText = ref('加载完成')

// 简化的应用初始化
const initializeApp = async () => {
  // 只加载用户信息，不显示进度条
  try {
    await loginUserStore.fetchLoginUser()
  } catch (error) {
    console.warn('获取用户信息失败:', error)
  }
}

// 应用进入动画
const onAppEnter = (el: Element) => {
  gsap.fromTo(el, 
    { 
      opacity: 0,
      scale: 0.95,
      y: 20
    },
    { 
      opacity: 1,
      scale: 1,
      y: 0,
      duration: 0.8,
      ease: 'power2.out'
    }
  )
}

const onAppAfterEnter = () => {
  // 应用加载完成后的额外初始化
  console.log('应用初始化完成')
}

onMounted(() => {
  initializeApp()
})
</script>

<style scoped>
#app {
  min-height: 100vh;
  position: relative;
}

.app-fade-enter-active {
  transition: all 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.app-fade-enter-from {
  opacity: 0;
  transform: scale(0.95) translateY(20px);
}
</style>
